<!DOCTYPE html>
<html lang="en">
<head>
    <title>日历</title>
    <link th:href="@{/css/jquery-ui.custom.min.css}" href="" rel="stylesheet"/>
    <link th:href="@{/css/fullcalendar.css}" href="" rel="stylesheet"/>
    <link th:href="@{/css/fullcalendar.print.css}" rel='stylesheet' media='print'/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-colorpicker.min.css}"/>
    <script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}"></script>
    <link rel="stylesheet" th:href="@{/css/tip.css}"/>
    <script type="text/javascript" th:src="@{/js/layer/tip.js}"></script>
    <link th:replace="common/header"/>
    <script>
        function getModelEdit(calEvent) {
            return '<div class="modal fade">\
                <div class="modal-dialog">\
                    <div class="modal-content">\
                    <form class="no-margin" name="editForm">\
                    <input type="hidden" name="id" id="id" value="' + calEvent.id + '">\
                        <div class="modal-body">\
                            <button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">&times;</button>\
                            <label>修改事件 &nbsp;</label></br>\
                            <div class="row-fluid">\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="title">事件名称:<span style="color:red">*</span></label>\
                                        <div class="controls">\
                                            <input name="title" id="title" placeholder="事件名称" class="input_fix7" autocomplete="off" type="text" value="' + calEvent.title + '" />\
                                        </div>\
                                    </div>\
                                </div>\
                                <div class="span6">\
                                    <span style="color:red"><span id="title_error"></span>&nbsp;</span>\
                                </div>\
                            </div>\
                            <div class="row-fluid">\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="startTime">开始时间:<span style="color:red">*</span></label>\
                                        <div class="controls">\
                                            <input name="startTime" id="startTime" class="input_fix8" placeholder="开始时间" value="' + $.fullCalendar.formatDate(calEvent.start, "HH:mm") + '"/>\
                                            <img onclick="WdatePicker({el:\'startTime\',dateFmt:\'HH:mm\'})" style="width:16px;height:22px" align="middle" src="../js/My97DatePicker/skin/datePicker.gif"/>\
                                       </div>\
                                    </div>\
                                </div>\
                                <div class="span6">\
                                    <span style="color:red"><span id="startTime_error"></span>&nbsp;</span>\
                                </div>\
                            </div>\
                            <div class="row-fluid">\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="endTime">结束时间:</label>\
                                        <div class="controls">\
                                            <input name="endTime" id="endTime" class="input_fix8" placeholder="结束时间" value="' + $.fullCalendar.formatDate(calEvent.end, "yyyy-MM-dd HH:mm") + '"/>\
                                            <img onclick="WdatePicker({el:\'endTime\',dateFmt:\'yyyy-MM-dd HH:mm\'})" style="width:16px;height:22px" align="middle" src="../js/My97DatePicker/skin/datePicker.gif"/>\
                                        </div>\
                                    </div>\
                                </div>\
                                <div class="span6">\
                                    <span style="color:red"><span id="endTime_error"></span>&nbsp;</span>\
                                </div>\
                            </div>\
                            <div class="row-fluid">\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="allDay">是否为全日事件:</label>\
                                        <input name="allDay" id="allDay" class="middle" type="checkbox" ' + (calEvent.allDay == true ? "checked='checked'" : "") + '/>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="row-fluid">\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="remind">是否需要提醒:</label>\
                                        <input name="remind" id="remind" type="checkbox" class="middle" ' + (calEvent.remind == true ? "checked='checked'" : "") + '/>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="row-fluid" id="remindDivEdit" ' + (calEvent.remindTime != "" ? "" : "style=\'display:none;\'") + '>\
                                <div class="span6">\
                                    <div class="control-group">\
                                        <label class="control-label" for="remindTime">提醒时间:</label>\
                                        <div class="controls">\
                                            <input name="remindTime" id="remindTime" class="input_fix8" placeholder="提醒时间" value="' + calEvent.remindTime + '"/>\
                                            <img onclick="WdatePicker({el:\'remindTime\',dateFmt:\'yyyy-MM-dd HH:mm\'})" style="width:16px;height:22px" align="middle" src="../js/My97DatePicker/skin/datePicker.gif"/>\
                                        </div>\
                                    </div>\
                                    <div class="span6">\
                                        <span style="color:red"><span id="remindTime_error"></span>&nbsp;</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="row-fluid">\n' +
                '                                <div class="span6">\n' +
                '                                    <div class="control-group">\n' +
                '                                        <label class="control-label" for="backColor">背景色:</label>\n' +
                '                                        <div class="controls">\n' +
                '                                            <select id="backColor" name="backColor" class="hide">\n' +
                '                                                <option value="#ac725e" ' + (calEvent.color == "#ac725e" ? "selected" : "") + '>#ac725e</option>\n' +
                '                                                <option value="#d06b64" ' + (calEvent.color == "#d06b64" ? "selected" : "") + '>#d06b64</option>\n' +
                '                                                <option value="#f83a22" ' + (calEvent.color == "#f83a22" ? "selected" : "") + '>#f83a22</option>\n' +
                '                                                <option value="#fa573c" ' + (calEvent.color == "#fa573c" ? "selected" : "") + '>#fa573c</option>\n' +
                '                                                <option value="#ff7537" ' + (calEvent.color == "#ff7537" ? "selected" : "") + '>#ff7537</option>\n' +
                '                                                <option value="#ffad46" ' + (calEvent.color == "#ffad46" ? "selected" : "") + '>#ffad46</option>\n' +
                '                                                <option value="#42d692" ' + (calEvent.color == "#42d692" ? "selected" : "") + '>#42d692</option>\n' +
                '                                                <option value="#16a765" ' + (calEvent.color == "#16a765" ? "selected" : "") + '>#16a765</option>\n' +
                '                                                <option value="#7bd148" ' + (calEvent.color == "#7bd148" ? "selected" : "") + '>#7bd148</option>\n' +
                '                                                <option value="#b3dc6c" ' + (calEvent.color == "#b3dc6c" ? "selected" : "") + '>#b3dc6c</option>\n' +
                '                                                <option value="#fbe983" ' + (calEvent.color == "#fbe983" ? "selected" : "") + '>#fbe983</option>\n' +
                '                                                <option value="#fad165" ' + (calEvent.color == "#fad165" ? "selected" : "") + '>#fad165</option>\n' +
                '                                                <option value="#92e1c0" ' + (calEvent.color == "#92e1c0" ? "selected" : "") + '>#92e1c0</option>\n' +
                '                                                <option value="#9fe1e7" ' + (calEvent.color == "#9fe1e7" ? "selected" : "") + '>#9fe1e7</option>\n' +
                '                                                <option value="#9fc6e7" ' + (calEvent.color == "#9fc6e7" ? "selected" : "") + '>#9fc6e7</option>\n' +
                '                                                <option value="#4986e7" ' + (calEvent.color == "#4986e7" ? "selected" : "") + '>#4986e7</option>\n' +
                '                                                <option value="#9a9cff" ' + (calEvent.color == "#9a9cff" ? "selected" : "") + '>#9a9cff</option>\n' +
                '                                                <option value="#b99aff" ' + (calEvent.color == "#b99aff" ? "selected" : "") + '>#b99aff</option>\n' +
                '                                                <option value="#c2c2c2" ' + (calEvent.color == "#c2c2c2" ? "selected" : "") + '>#c2c2c2</option>\n' +
                '                                                <option value="#cabdbf" ' + (calEvent.color == "#cabdbf" ? "selected" : "") + '>#cabdbf</option>\n' +
                '                                                <option value="#cca6ac" ' + (calEvent.color == "#cca6ac" ? "selected" : "") + '>#cca6ac</option>\n' +
                '                                                <option value="#f691b2" ' + (calEvent.color == "#f691b2" ? "selected" : "") + '>#f691b2</option>\n' +
                '                                                <option value="#cd74e6" ' + (calEvent.color == "#cd74e6" ? "selected" : "") + '>#cd74e6</option>\n' +
                '                                                <option value="#a47ae2" ' + (calEvent.color == "#a47ae2" ? "selected" : "") + '>#a47ae2</option>\n' +
                '                                                <option value="#555" ' + (calEvent.color == "#555" ? "selected" : "") + '>#555</option>\n' +
                '                                            </select>\n' +
                '                                        </div>\n' +
                '                                    </div>\n' +
                '                                </div>\n' +
                '                                <div class="span6">\n' +
                '                                    <span style="color:red"><span id="backColor_error"></span>&nbsp;</span>\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="row-fluid">\n' +
                '                                <div class="span6">\n' +
                '                                    <div class="control-group">\n' +
                '                                        <label class="control-label" for="fontColor">文字颜色:</label>\n' +
                '                                        <div class="controls">\n' +
                '                                            <select id="fontColor" name="fontColor" class="hide">\n' +
                '                                                <option value="#ac725e" ' + (calEvent.textColor == "#ac725e" ? "selected" : "") + '>#ac725e</option>\n' +
                '                                                <option value="#d06b64" ' + (calEvent.textColor == "#d06b64" ? "selected" : "") + '>#d06b64</option>\n' +
                '                                                <option value="#f83a22" ' + (calEvent.textColor == "#f83a22" ? "selected" : "") + '>#f83a22</option>\n' +
                '                                                <option value="#fa573c" ' + (calEvent.textColor == "#fa573c" ? "selected" : "") + '>#fa573c</option>\n' +
                '                                                <option value="#ff7537" ' + (calEvent.textColor == "#ff7537" ? "selected" : "") + '>#ff7537</option>\n' +
                '                                                <option value="#ffad46" ' + (calEvent.textColor == "#ffad46" ? "selected" : "") + '>#ffad46</option>\n' +
                '                                                <option value="#42d692" ' + (calEvent.textColor == "#42d692" ? "selected" : "") + '>#42d692</option>\n' +
                '                                                <option value="#16a765" ' + (calEvent.textColor == "#16a765" ? "selected" : "") + '>#16a765</option>\n' +
                '                                                <option value="#7bd148" ' + (calEvent.textColor == "#7bd148" ? "selected" : "") + '>#7bd148</option>\n' +
                '                                                <option value="#b3dc6c" ' + (calEvent.textColor == "#b3dc6c" ? "selected" : "") + '>#b3dc6c</option>\n' +
                '                                                <option value="#fbe983" ' + (calEvent.textColor == "#fbe983" ? "selected" : "") + '>#fbe983</option>\n' +
                '                                                <option value="#fad165" ' + (calEvent.textColor == "#fad165" ? "selected" : "") + '>#fad165</option>\n' +
                '                                                <option value="#92e1c0" ' + (calEvent.textColor == "#92e1c0" ? "selected" : "") + '>#92e1c0</option>\n' +
                '                                                <option value="#9fe1e7" ' + (calEvent.textColor == "#9fe1e7" ? "selected" : "") + '>#9fe1e7</option>\n' +
                '                                                <option value="#9fc6e7" ' + (calEvent.textColor == "#9fc6e7" ? "selected" : "") + '>#9fc6e7</option>\n' +
                '                                                <option value="#4986e7" ' + (calEvent.textColor == "#4986e7" ? "selected" : "") + '>#4986e7</option>\n' +
                '                                                <option value="#9a9cff" ' + (calEvent.textColor == "#9a9cff" ? "selected" : "") + '>#9a9cff</option>\n' +
                '                                                <option value="#b99aff" ' + (calEvent.textColor == "#b99aff" ? "selected" : "") + '>#b99aff</option>\n' +
                '                                                <option value="#c2c2c2" ' + (calEvent.textColor == "#c2c2c2" ? "selected" : "") + '>#c2c2c2</option>\n' +
                '                                                <option value="#cabdbf" ' + (calEvent.textColor == "#cabdbf" ? "selected" : "") + '>#cabdbf</option>\n' +
                '                                                <option value="#cca6ac" ' + (calEvent.textColor == "#cca6ac" ? "selected" : "") + '>#cca6ac</option>\n' +
                '                                                <option value="#f691b2" ' + (calEvent.textColor == "#f691b2" ? "selected" : "") + '>#f691b2</option>\n' +
                '                                                <option value="#cd74e6" ' + (calEvent.textColor == "#cd74e6" ? "selected" : "") + '>#cd74e6</option>\n' +
                '                                                <option value="#a47ae2" ' + (calEvent.textColor == "#a47ae2" ? "selected" : "") + '>#a47ae2</option>\n' +
                '                                                <option value="#555" ' + (calEvent.textColor == "#555" ? "selected" : "") + '>#555</option>\n' +
                '                                            </select>\n' +
                '                                         </div>\n' +
                '                                     </div>\n' +
                '                                 </div>\n' +
                '                                 <div class="span6">\n' +
                '                                    <span style="color:red"><span id="fontColor_error"></span>&nbsp;</span>\n' +
                '                                 </div>\
                                            </div>\
                                        </div>\
                                        <div class="modal-footer">\
                                            <button type="submit" class="btn btn-sm btn-success" data-action="add"><i class="ace-icon fa fa-check"></i> 更新</button>\
                                            <button type="button" class="btn btn-sm btn-danger" data-action="delete"><i class="ace-icon fa fa-trash-o"></i> 删除</button>\
                                            <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> 取消</button>\
                                        </div>\
                                    </form>\
                                    </div>\
                                </div>\
                            </div>';
        }

        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            if (r < 16) {
                r = "0" + r.toString(16);
            } else {
                r = r.toString(16);
            }
            if (g < 16) {
                g = "0" + g.toString(16);
            } else {
                g = g.toString(16);
            }
            if (b < 16) {
                b = "0" + b.toString(16);
            } else {
                b = b.toString(16);
            }
            return "#" + r + g + b;
        }

        var modal;

        /** 当天信息初始化 **/
        $(function () {
            var dayDate = new Date();
            var d = $.fullCalendar.formatDate(dayDate, "dddd");
            var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
            var lunarDate = lunar(dayDate);
            $(".alm_date").html(m + "&nbsp;" + d);
            $(".today_date").html(dayDate.getDate())
            $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
            $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
            $("#alm_cnA").html("【" + lunarDate.animal + "年】");
            var fes = lunarDate.festival();
            if (fes.length > 0) {
                $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                $(".alm_lunar_date").show();
            } else {
                $(".alm_lunar_date").hide();
            }
        });

        $(document).ready(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: true,
                selectable: true,
                selectHelper: true,
                events: function (start, end, callback) {
                    var startTime = $.fullCalendar.formatDate($("#calendar").fullCalendar('getView').visStart, "yyyy-MM-dd HH:mm:ss");
                    var endTime = $.fullCalendar.formatDate($("#calendar").fullCalendar('getView').visEnd, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: "/getRemindByTime",
                        type: "post",
                        dataType: "json",
                        data: {startTime: startTime, endTime: endTime},
                        success: function (json) {
                            var events = [];
                            if (json.success) {
                                $.each(json.obj, function (key, value) {
                                    var start = new Date(value.start.time);
                                    var end = value.end == null ? null : new Date(value.end.time);
                                    var remindTime = value.remindTime == null ? null : new Date(value.remindTime.time);
                                    events.push({
                                        id: value.id,
                                        title: value.title,
                                        start: $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"),
                                        end: $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss"),
                                        allDay: value.allDay,
                                        remind: value.remind,
                                        remindTime: $.fullCalendar.formatDate(remindTime, "yyyy-MM-dd HH:mm:ss"),
                                        color: value.color,
                                        textColor: value.textColor
                                    });
                                });
                                callback(events);
                            } else {
                                showTip(json.msg, 4000);
                            }

                        }
                    });
                },
                dayClick: function (dayDate, allDay, jsEvent, view) { //点击单元格事件
                    var d = $.fullCalendar.formatDate(dayDate, "dddd");
                    var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
                    var ymd = $.fullCalendar.formatDate(dayDate, "yyyy-MM-dd");
                    var lunarDate = lunar(dayDate);
                    $(".alm_date").html(m + "&nbsp;" + d);
                    $(".today_date").html(dayDate.getDate())
                    $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
                    $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
                    $("#alm_cnA").html("【" + lunarDate.animal + "年】");
                    var fes = lunarDate.festival();
                    if (fes.length > 0) {
                        $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                        $(".alm_lunar_date").show();
                    } else {
                        $(".alm_lunar_date").hide();
                    }
                    // 当天则显示“当天”标识
                    var now = new Date();
                    if (now.getDate() == dayDate.getDate() && now.getMonth() == dayDate.getMonth() && now.getFullYear() == dayDate.getFullYear()) {
                        $(".today_icon").show();
                    } else {
                        $(".today_icon").hide();
                    }

                    modal = $("#add");
                    modal.show();
                    modal.find("select[name='backColor']").ace_colorpicker();
                    modal.find("select[name='fontColor']").ace_colorpicker();
                    modal.find("input[name='remind']").on('change', function () {
                        if ($(this).is(":checked")) {
                            $("#remindDivAdd").show();
                        } else {
                            $("#remindDivAdd").hide();
                        }
                    });

                    modal.find('form[name="addForm"]').on('submit', function (ev) {
                        ev.preventDefault();
                        var start, end;
                        var title = $(this).find("input[name='title']").val();
                        var allDay = $(this).find("input[name='allDay']").is(':checked');
                        if (allDay) {
                            start = ymd + " 00:00:00";
                            end = ymd + " 23:59:59";
                        } else {
                            start = $(this).find("input[name='startTime']").val();
                            start = ymd + " " + start + ":00";
                            end = $(this).find("input[name='endTime']").val();
                        }
                        var remind = $(this).find("input[name='remind']").is(':checked');
                        var remindTime = $(this).find("input[name='remindTime']").val();
                        var color = $(this).find("select[name='backColor']").val();
                        var textColor = $(this).find("select[name='fontColor']").val();
                        var event = {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay,
                            remind: remind,
                            remindTime: remindTime,
                            textColor: textColor,
                            color: color
                        };
                        if (title !== "" && start !== "") {
                            $.ajax({
                                url: "/addRemind",
                                type: "post",
                                dataType: "json",
                                data: event,
                                success: function (json) {
                                    if (json.success) {
                                        $("#calendar").fullCalendar('renderEvent', event, true);
                                    } else {
                                        showTip(json.msg, 4000);
                                    }
                                }, error: function () {
                                    showTip("出错了", 4000);
                                }
                            });
                        }
                        modal.modal("hide");
                        document.getElementById("addForm").reset();
                    });
                    modal.modal('show').on('hidden', function () {
                        modal.remove();
                        document.getElementById("addForm").reset();
                    });
                    $("#calendar").fullCalendar('unselect');
                },
                loading: function (bool) {
                    if (bool)
                        $("#msgTopTipWrapper").show();
                    else
                        $("#msgTopTipWrapper").fadeOut();
                },
                eventClick: function (calEvent, jsEvent, view) {
                    //display a modal
                    var modalEdit = getModelEdit(calEvent);
                    modal = $(modalEdit);
                    modal.show();
                    modal.find("select[name='backColor']").ace_colorpicker();
                    modal.find("select[name='fontColor']").ace_colorpicker();
                    modal.find("input[name='remind']").on('change', function () {
                        if ($(this).is(":checked")) {
                            $("#remindDivEdit").show();
                        } else {
                            $("#remindDivEdit").hide();
                        }
                    });
                    modal.find('form[name="editForm"]').on('submit', function (ev) {
                        ev.preventDefault();
                        calEvent.id = $(this).find("input[name='id']").val();
                        calEvent.title = $(this).find("input[name='title']").val();
                        calEvent.end = $(this).find("input[name='endTime']").val();
                        calEvent.allDay = $(this).find("input[name='allDay']").is(':checked');
                        calEvent.remind = $(this).find("input[name='remind']").is(':checked');
                        calEvent.remindTime = $(this).find("input[name='remindTime']").val();
                        calEvent.color = $(this).find("select[name='backColor']").val();
                        calEvent.textColor = $(this).find("select[name='fontColor']").val();
                        var event = {
                            id: calEvent.id,
                            title: calEvent.title,
                            start: $.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd HH:mm:ss"),
                            end: calEvent.end != "" ? $.fullCalendar.formatDate(calEvent.end, "yyyy-MM-dd HH:mm:ss") : "",
                            allDay: calEvent.allDay,
                            remind: calEvent.remind,
                            remindTime: calEvent.remindTime != "" ? $.fullCalendar.formatDate(calEvent.remindTime, "yyyy-MM-dd HH:mm:ss") : "",
                            textColor: calEvent.textColor,
                            color: calEvent.color
                        };
                        $.ajax({
                            url: "/editRemind",
                            type: "post",
                            dataType: "json",
                            data: event,
                            success: function (json) {
                                if (json.success) {
                                    $("#calendar").fullCalendar('updateEvent', calEvent);
                                } else {
                                    showTip(json.msg, 4000);
                                }
                            }, error: function () {
                                showTip("出错了", 4000);
                            }
                        });
                        modal.modal("hide");
                    });
                    modal.find('button[data-action=delete]').on('click', function () {
                        $.ajax({
                            url: "/deleteRemind",
                            type: "post",
                            dataType: "json",
                            data: {id: $("#id").val()},
                            success: function (json) {
                                if (json.success) {
                                    $("#calendar").fullCalendar('removeEvents', function (ev) {
                                        return (ev._id == calEvent._id);
                                    });
                                } else {
                                    showTip(json.msg, 4000);
                                }
                            }, error: function () {
                                showTip("出错了", 4000);
                            }
                        });
                        modal.modal("hide");
                    });
                    modal.modal('show').on('hidden', function () {
                        modal.hide();
                    });
                }
            });

        });
        /** 绑定事件到日期下拉框 **/
        $(function () {
            $("#fc-dateSelect").delegate("select", "change", function () {
                var fcsYear = $("#fcs_date_year").val();
                var fcsMonth = $("#fcs_date_month").val();
                $("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
            });
        });
    </script>
</head>

<body class="no-skin">
<div th:replace="common/top"/>
<div class="main-container ace-save-state" id="main-container">
    <div th:replace="common/menu"/>
    <div class="main-content">
        <div th:replace="common/title"/>
        <div class="page-content">
            <div th:replace="common/skin"/>
            <div class="page-header">
                <h1>
                    日历
                    <small>
                        <i class="ace-icon fa fa-angle-double-right"></i>
                        可以编辑事件
                    </small>
                </h1>
            </div><!-- /.page-header -->

            <div class="row-fluid">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="space"></div>
                    <div class="row-fluid">
                        <div class="col-xs-10">
                            <div id="msgTopTipWrapper" style="display:none">
                                <div id="msgTopTip">
                                    <span><i class="iconTip"></i>正在载入日历数据...</span>
                                </div>
                            </div>
                            <div id="calendar" class="dib"></div>
                        </div>
                        <div class="col-xs-2 hidden-480">
                            <div id="div_day_detail" class="h_calendar_alm">
                                <div class="alm_date"></div>
                                <div class="alm_content nofestival">
                                    <div class="today_icon"></div>
                                    <div class="today_date"></div>
                                    <p id="alm_cnD"></p>
                                    <p id="alm_cnY"></p>
                                    <p id="alm_cnA"></p>
                                    <div class="alm_lunar_date"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.page-content -->
    </div><!-- /.main-container -->
    <div th:replace="common/footer"/>
</div>
<div th:replace="common/buttom"/>
<div class="modal fade" id="add" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="no-margin" name="addForm" id="addForm">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">&times;</button>
                    <label>添加事件 &nbsp;</label></br>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="title">事件名称:<span style="color:red">*</span></label>
                                <div class="controls">
                                    <input name="title" id="title" placeholder="事件名称" class="input_fix7"
                                           autocomplete="off" type="text" value=""/>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <span style="color:red"><span id="title_error"></span>&nbsp;</span>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="startTime">开始时间:<span
                                        style="color:red">*</span></label>
                                <div class="controls">
                                    <input name="startTime" id="startTime" class="input_fix8" placeholder="开始时间"
                                           value="00:00"/>
                                    <img onclick="WdatePicker({el:'startTime',dateFmt:'HH:mm'})"
                                         style="width:16px;height:22px" align="middle"
                                         src="../js/My97DatePicker/skin/datePicker.gif"/>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <span style="color:red"><span id="startTime_error"></span>&nbsp;</span>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="endTime">结束时间:</label>
                                <div class="controls">
                                    <input name="endTime" id="endTime" class="input_fix8" placeholder="结束时间" value=""/>
                                    <img onclick="WdatePicker({el:'endTime',dateFmt:'yyyy-MM-dd HH:mm'})"
                                         style="width:16px;height:22px" align="middle"
                                         src="../js/My97DatePicker/skin/datePicker.gif"/>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <span style="color:red"><span id="endTime_error"></span>&nbsp;</span>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="allDay">是否为全日事件:</label>
                                <input name="allDay" id="allDay" class="middle" type="checkbox" value=""/>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="remind">是否需要提醒:</label>
                                <input name="remind" id="remind" class="middle" type="checkbox" value=""/>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid" id="remindDivAdd" style="display:none;">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="remindTime">提醒时间:</label>
                                <div class="controls">
                                    <input name="remindTime" id="remindTime" class="input_fix8" placeholder="提醒时间"
                                           value=""/>
                                    <img onclick="WdatePicker({el:'remindTime',dateFmt:'yyyy-MM-dd HH:mm'})"
                                         style="width:16px;height:22px" align="middle"
                                         src="../js/My97DatePicker/skin/datePicker.gif"/>
                                </div>
                            </div>
                            <div class="span6">
                                <span style="color:red"><span id="remindTime_error"></span>&nbsp;</span>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="backColor">背景色:</label>
                                <div class="controls">
                                    <select id="backColor" name="backColor" class="hide">
                                        <option value="#ac725e">#ac725e</option>
                                        <option value="#d06b64">#d06b64</option>
                                        <option value="#f83a22">#f83a22</option>
                                        <option value="#fa573c">#fa573c</option>
                                        <option value="#ff7537">#ff7537</option>
                                        <option value="#ffad46">#ffad46</option>
                                        <option value="#42d692">#42d692</option>
                                        <option value="#16a765">#16a765</option>
                                        <option value="#7bd148">#7bd148</option>
                                        <option value="#b3dc6c">#b3dc6c</option>
                                        <option value="#fbe983">#fbe983</option>
                                        <option value="#fad165">#fad165</option>
                                        <option value="#92e1c0">#92e1c0</option>
                                        <option value="#9fe1e7">#9fe1e7</option>
                                        <option value="#9fc6e7">#9fc6e7</option>
                                        <option value="#4986e7">#4986e7</option>
                                        <option value="#9a9cff">#9a9cff</option>
                                        <option value="#b99aff">#b99aff</option>
                                        <option value="#c2c2c2">#c2c2c2</option>
                                        <option value="#cabdbf">#cabdbf</option>
                                        <option value="#cca6ac">#cca6ac</option>
                                        <option value="#f691b2">#f691b2</option>
                                        <option value="#cd74e6">#cd74e6</option>
                                        <option value="#a47ae2">#a47ae2</option>
                                        <option value="#555">#555</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <span style="color:red"><span id="backColor_error"></span>&nbsp;</span>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label" for="fontColor">文字颜色:</label>
                                <div class="controls">
                                    <select id="fontColor" name="fontColor" class="hide">
                                        <option value="#ac725e">#ac725e</option>
                                        <option value="#d06b64">#d06b64</option>
                                        <option value="#f83a22">#f83a22</option>
                                        <option value="#fa573c">#fa573c</option>
                                        <option value="#ff7537">#ff7537</option>
                                        <option value="#ffad46">#ffad46</option>
                                        <option value="#42d692">#42d692</option>
                                        <option value="#16a765">#16a765</option>
                                        <option value="#7bd148">#7bd148</option>
                                        <option value="#b3dc6c">#b3dc6c</option>
                                        <option value="#fbe983">#fbe983</option>
                                        <option value="#fad165">#fad165</option>
                                        <option value="#92e1c0">#92e1c0</option>
                                        <option value="#9fe1e7">#9fe1e7</option>
                                        <option value="#9fc6e7">#9fc6e7</option>
                                        <option value="#4986e7">#4986e7</option>
                                        <option value="#9a9cff">#9a9cff</option>
                                        <option value="#b99aff">#b99aff</option>
                                        <option value="#c2c2c2">#c2c2c2</option>
                                        <option value="#cabdbf">#cabdbf</option>
                                        <option value="#cca6ac">#cca6ac</option>
                                        <option value="#f691b2">#f691b2</option>
                                        <option value="#cd74e6">#cd74e6</option>
                                        <option value="#a47ae2">#a47ae2</option>
                                        <option value="#555">#555</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <span style="color:red"><span id="fontColor_error"></span>&nbsp;</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success" data-action="add"><i
                            class="ace-icon fa fa-check"></i> 保存
                    </button>
                    <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i>
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="common/layer"/>
<script th:src="@{/js/common/jquery-ui.custom.min.js}"></script>
<script th:src="@{/js/common/jquery.ui.touch-punch.min.js}"></script>
<script th:src="@{/js/common/moment.min.js}"></script>
<script th:src="@{/js/common/fullcalendar.js}"></script>
<script th:src="@{/js/colorpicker/bootstrap-colorpicker.min.js}"></script>
</body>
</html>
